<template>
  <div>
    <van-nav-bar title="购物车" />

    <div v-if="!shopCarList.length">暂无商品</div>
    <div class="list" v-else>
      <van-swipe-cell
        class="list-item"
        v-for="(item, idx) of shopCarList"
        :key="idx"
      >
        <div class="list-item-container">
          <!-- 勾选 -->
          <van-checkbox
            class="checkbox"
            v-model="item.isChecked"
          ></van-checkbox>

          <!-- 图片 -->
          <van-image class="img" :src="item.image" />

          <!-- 中间 -->
          <div class="center">
            <div class="title">{{ item.name }}({{ item.sku.type }})</div>
            <van-stepper class="stepper" v-model="item.num" integer />
          </div>

          <!-- 右边 -->
          <div class="right">
            <div>{{ $toMoney($toFixed(item.sku.price)) }}</div>
            <div>*{{ item.num }}</div>
            <div>{{ $toMoney($toFixed(item.num * item.sku.price)) }}</div>
          </div>
        </div>
        <template #right>
          <van-button
            square
            type="danger"
            text="删除"
            class="remove"
            @click="removeItem(idx)"
          />
        </template>
      </van-swipe-cell>
    </div>

    <van-submit-bar :price="allTotal" button-text="提交订单" class="submit-bar">
      <van-checkbox v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>
    <tabBar />
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapMutations } = createNamespacedHelpers("shopcar");
export default {
  data() {
    return {
      shopCarList: [],
    };
  },
  computed: {
    allTotal() {
      let sum = 0;
      if (this.shopCarList.length) {
        this.shopCarList.forEach((item) => {
          if (item.isChecked) {
            sum += item.num * item.sku.price;
          }
        });
      }
      return sum * 100;
    },
    allChecked: {
      get() {
        let bool = false;
        if (this.shopCarList.length) {
          bool = this.shopCarList.every((item) => {
            return item.isChecked;
          });
        }
        return bool;
      },
      set(bool) {
        if (bool) {
          this.shopCarList.map((item) => {
            item.isChecked = true;
          });
        } else {
          this.shopCarList.map((item) => {
            item.isChecked = false;
          });
        }
      },
    },
  },
  methods: {
    ...mapMutations(["getGoodsLength"]),
    removeItem(idx) {
      this.$dialog
        .confirm({
          title: "删除",
          message: "确定删除吗？",
        })
        .then(() => {
          this.shopCarList.splice(idx, 1);
          this.$setStorage("shopCarList", this.shopCarList);
          this.getGoodsLength();
          this.$toast.success("删除成功");
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  activated() {
    this.shopCarList = this.$getStoarge("shopCarList") || [];
    console.log(this.shopCarList);
  },
};
</script>

<style scoped>
.list-item-container {
  display: flex;
  margin: 10px 0;
}
.list-item-container .checkbox {
  margin: 0 10px;
}
.list-item-container .img {
  width: 200px;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
}
.list-item-container .center {
  margin: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.list-item-container .right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.remove {
  height: 100%;
}
.submit-bar {
  bottom: 104px;
}
</style>
